! function($) {
    const draggable = $('.draggable'); 
    const slickslide = $('.draggable div'); 
    const silderNav  = $('.draggable  ul li'); 
    const slickprev = $('.slick-prev'); 
    const slicknext = $('.slick-next'); 
    let index = 0;
    let timer = null;

    //1.点击按钮，图片切换
    silderNav.on('click', function() {
        index = $(this).index(); 
        tabSwitch();
    });

    //2.显示隐藏左右箭头
    draggable.hover(function() {
        slickprev.show();
        slicknext.show();
        //关闭自动轮播，关闭定时器
        clearInterval(timer);
    }, function() {
        slickprev.hide();
        slicknext.hide();
        timer = setInterval(() => {
            slicknext.click(); 
        }, 3000);
    });

    //3.左右箭头的操作
    slicknext.on('click', function() {
        index++;
        if (index > silderNav.length - 1) {
            index = 0;
        }
        tabSwitch();
    });

    slickprev.on('click', function() {
        index--;
        if (index < 0) {
            index = silderNav.length - 1;
        }
        tabSwitch();
    });

    function tabSwitch() {
        silderNav.eq(index).addClass('silderNav').siblings('li').removeClass('silderNav');
        slickslide.eq(index).stop(true).animate({ opacity: 1 }).siblings('div').stop(true).animate({ opacity: 0 });
    }

    // 4.自动轮播
    timer = setInterval(() => {
        slicknext.click(); 
    }, 3000);

}(jQuery);